﻿.ant-btn {
    @each $name, $value in $unsuported-button-colors {
        $color: $value;
        $color-invert: color-yiq($value);

        &-#{$name} {
            color: $color-invert;
            background-color: $color;
            border-color: $color;

            > a:only-child {
                color: currentColor;
            }

            &:hover,
            &:focus {
                color: $color-invert;
                background-color: lighten($color, $button-hover-lighten);
                border-color: lighten($color, $button-hover-lighten);

                > a:only-child,
                > a:only-child {
                    color: currentColor;
                }
            }

            &:active,
            &.active {
                color: $color-invert;
                background-color: darken($color, $button-active-darken);
                border-color: darken($color, $button-active-darken);

                > a:only-child,
                > a:only-child {
                    color: currentColor;
                }
            }

            &-disabled,
            &.disabled,
            &[disabled],
            &-disabled:hover,
            &.disabled:hover,
            &[disabled]:hover,
            &-disabled:focus,
            &.disabled:focus,
            &[disabled]:focus,
            &-disabled:active,
            &.disabled:active,
            &[disabled]:active,
            &-disabled.active,
            &.disabled.active,
            &[disabled].active {
                color: rgba(0, 0, 0, 0.25);
                background-color: #f5f5f5;
                border-color: #d9d9d9;
                text-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;

                > a:only-child {
                    color: currentColor;
                }

                > a:only-child::after {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    background: transparent;
                    content: '';
                }
            }
        }
    }
}

.ant-btn-group {
    @each $name, $value in $button-colors {
        $color: $value;
        $color-invert: color-yiq($value);

        .ant-btn {
            &-primary:not(:first-child):not(:last-child) {
                border-right-color: $color;
                border-left-color: $color;
            }

            &-primary:not(:first-child):not(:last-child):disabled {
                border-color: #d9d9d9;
            }

            &-btn-primary:first-child:not(:last-child) {
                border-right-color: $color;
            }

            &-primary:first-child:not(:last-child)[disabled] {
                border-right-color: #d9d9d9;
            }

            &-primary:last-child:not(:first-child),
            &-primary + &-primary {
                border-left-color: $color;
            }

            &-primary:last-child:not(:first-child)[disabled],
            &-primary + &-primary[disabled] {
                border-left-color: #d9d9d9;
            }
        }
    }
}

.ant-btn-outline {
    @each $name, $value in $button-colors {
        $color: $value;
        $color-invert: color-yiq($value);

        &-#{$name} {
            color: $color;
            background-color: transparent;
            border-color: $color;

            > a:only-child {
                color: currentColor;
            }

            &:hover,
            &:focus {
                color: lighten($color, $button-hover-lighten);
                border-color: lighten($color, $button-hover-lighten);

                > a:only-child,
                > a:only-child {
                    color: currentColor;
                }
            }

            &:active,
            &.active {
                color: darken($color, $button-active-darken);
                border-color: darken($color, $button-active-darken);

                > a:only-child,
                > a:only-child {
                    color: currentColor;
                }
            }

            &-disabled,
            &.disabled,
            &[disabled],
            &-disabled:hover,
            &.disabled:hover,
            &[disabled]:hover,
            &-disabled:focus,
            &.disabled:focus,
            &[disabled]:focus,
            &-disabled:active,
            &.disabled:active,
            &[disabled]:active,
            &-disabled.active,
            &.disabled.active,
            &[disabled].active {
                color: rgba(0, 0, 0, 0.25);
                background-color: transparent;
                border-color: #d9d9d9;
                text-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;

                > a:only-child {
                    color: currentColor;
                }

                > a:only-child::after {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    background: transparent;
                    content: '';
                }
            }
        }
    }
}

.ant-btn-group,
.ant-btn-group-vertical {
    position: relative;
    display: inline-flex;
    vertical-align: middle;

    > .ant-btn {
        position: relative;
        flex: 1 1 auto;

        &:hover,
        &:focus,
        &:active,
        &.active {
            z-index: 1;
        }
    }
}

.ant-btn-xs {
    padding: 0px 7px;
    font-size: 10px;
    height: 16px;
}

.ant-btn-sm {
    padding: 0px 9px;
    font-size: 12px;
    height: 24px;
}

.ant-btn-md {
    padding: 4.5px 11px;
    font-size: 14px;
    height: 36px;
}

.ant-btn-lg {
    padding: 6.5px 13px;
    font-size: 16px;
    height: 40px;
}

.ant-btn-xl {
    padding: 8.5px 15px;
    font-size: 18px;
    height: 48px;
}

.ant-btn-group-xs > .ant-btn,
.ant-btn-group-xs > span > .ant-btn {
    @extend .ant-btn-xs;
}

.ant-btn-group-md > .ant-btn,
.ant-btn-group-md > span > .ant-btn {
    @extend .ant-btn-md;
}

.ant-btn-group-xl > .ant-btn,
.ant-btn-group-xl > span > .ant-btn {
    @extend .ant-btn-xl;
}
